﻿<%@ Page Title="" Language="C#" MasterPageFile="~/PIMMobile.master" AutoEventWireup="true" CodeFile="Recipe.aspx.cs" Inherits="Recipe" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script src="Scripts/jquery.min.js" type="text/javascript" > </script>
    <link href="Styles/validationEngine.jquery.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery.validationEngine.js" type="text/javascript"></script>
    <script src="Scripts/jquery.validationEngine-en.js" type="text/javascript"></script>
    <link rel="stylesheet" href="jquery/jRating.jquery.css" type="text/css" />
    <script type="text/javascript" src="jquery/jRating.jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        jQuery(".form").validationEngine({ scroll: false, focusFirstField: false });
    });
    function getFile() {
        document.getElementById("fImageUpload").click();
        return false;
    }
    function readURL(input) {
        //alert(input);
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                document.getElementById("<%=Image2.ClientID%>").src = e.target.result;
                var object = e.target.result;
                object = object.replace('data:image/png;base64,', '');
                object = object.replace('data:image/png;base64,', '');
                object = object.replace('data:image/jpg;base64,', '');
                object = object.replace('data:image/gif;base64,', '');
                object = object.replace('data:image/jpeg;base64,', '');
                object = object.replace('data:image/bmp;base64,', '');
                object = object.replace('data:image/Icon;base64,', '');
                document.getElementById("<%=hdImage.ClientID%>").value = object;
                //alert(object);
            };
            reader.readAsDataURL(input.files[0]);
            return false;
        }
    }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
</div class="form">
<div class="form-upload" >
    <div class="form-row-upload">
        <div class="form-image" >
            <img runat="server" id="Image2"  class="img_border"/>
            <asp:HiddenField id="hdImage" runat="server"/>
        </div>
        <div class="basic" style="margin:0 auto;"  data-average="0" data-id="1"></div>
        <div style="text-align:center; " >
            <asp:Button ID="btnUpload" Width="90" CssClass="submit" runat="server" Visible="false" Text="Upload"  OnClientClick="return getFile()" />
        </div>
    </div>
    </div>
    <div style="overflow: hidden; height: 0px; width: 0px;">
        <input type="file" id="fImageUpload" onchange="readURL(this);" />
    </div>

    <asp:Panel ID="panel1" Visible="false" runat="server">
        <div class="form-right-recipe">
            <asp:TextBox runat="server" ID="txtRecipeName" placeholder="Recipe Name" MaxLength="50"
                CssClass="validate[required] textInputs "></asp:TextBox>
            <div style="margin-top: 5px; width: 30%">
                <asp:TextBox runat="server" ID="txtServing" placeholder="Serving" MaxLength="10"
                    CssClass="textInputs "></asp:TextBox>
            </div>
            <div style="margin-top: 5px;">
                <input type="checkbox" id="Checkbox1" checked="true" runat="server" name="vehicle"
                    value="1" />Share with others
            </div>
        </div>
        <div style="overflow: hidden; height: 0px; width: 0px;">
            <input type="file" id="File1" onchange="readURL(this);" />
        </div>
        <div style="clear: both">
        </div>
        <div class="form-row-recipe" style="">
            <div style="width: 96%;">
                <asp:TextBox runat="server" ID="txtDescription" placeholder="Description" CssClass="textInputs "></asp:TextBox>
            </div>
            <div style="width: 96%; margin-top: 10px;">
                <asp:TextBox runat="server" ID="txtIngredient" TextMode="MultiLine" placeholder="Ingredients"
                    CssClass="textAreaBoxInputs "></asp:TextBox>
            </div>
            <div style="width: 96%; margin-top: 10px;">
                <asp:TextBox runat="server" ID="txtRecDirection" TextMode="MultiLine" placeholder="Direction"
                    CssClass="textAreaBoxInputs "></asp:TextBox>
            </div>
        </div>
    </asp:Panel>

    <asp:Panel ID="panel2" Visible="true" runat="server">
        <div  style="width: 60%; float: left; margin: 10px auto;">
            <div style="text-align: center; font-size: 12pt; font-weight: bold;">
                <asp:Label runat="server" ID="lblRecipeName"></asp:Label>
            </div>
            <div style="margin-top: 10px; height: 20px; margin-left: 3px;">
                Serving:
                <asp:Label runat="server" ID="lblServing" CssClass="padding-text"></asp:Label>
            </div>
            <div style="margin-top: 5px;">
                <input type="checkbox" id="chIsPublish"  disabled="true"  checked="true" runat="server" name="vehicle"
                    value="1" />Share with others
            </div>
        </div>
        <div style="clear: both">
        </div>
        <div style="width: 100%; margin: 5px">
            <div style="width: 97%; min-height: 20px;" class="box01">
                <asp:Label runat="server" ID="lblDescription" CssClass="padding-text"></asp:Label>
            </div>
            <div  class="box01 form-text">
                <asp:Label runat="server" ID="lblIngredient" TextMode="MultiLine" CssClass="padding-text"></asp:Label>
            </div>
            <div class="box01 form-text">
                <asp:Label runat="server" ID="lblRecDirection" TextMode="MultiLine" CssClass="padding-text"></asp:Label>
            </div>
        </div>
    </asp:Panel>
<div>
    <div style="width:100%; text-align:center;">
       <asp:Button ID="btnEdit" Text="Edit" runat="server" CssClass="save_button" Visible="false" onclick="btn_Click"  ></asp:Button>
       <asp:Button id="btnSave" Text="Save" runat="server" CssClass="save_button" Visible="false"  onclick="btnInsertRecipe_Click"
                          OnClientClick="return jQuery('.form').validationEngine('validate')"  CausesValidation="false" />
       <asp:Button ID="btnDelete" Visible="false" CssClass="save_button" Text="Delete" runat="server"  OnClick="btnDelete_Click" ></asp:Button> 
    </div>
</div>
<div>
<script type="text/javascript">

    function initRating() {
        var userid = '<%=Session["Userid"]%>';
        //userid = "1";
        if (document.getElementById("<%=ratingStar.ClientID%>").value != "") {
            //alert(userid);
            $(".basic").attr('data-average', document.getElementById("<%=ratingStar.ClientID%>").value);
        } else {
            $(".basic").attr('data-average', '0');
        }
        if (userid != "") {
            var recipeID = getUrlVars()["RecipeId"];
            //alert(recipeID);
            $(".basic").jRating({
                step: true,
                length: 5,
                decimalLength: 1,
                smallStarsPath: 'jquery/icons/small.png',
                onSuccess: function (element, rate) {
                    document.getElementById("<%=ratingStar.ClientID%>").value = rate;
                    if (recipeID != null)
                        submitRating(rate);
                },
                onError: function () {
                    alert('Error : please retry');
                }
            });

        } else {
            $(".basic").jRating({
                isDisabled: true
            });
        }
        //return false;
    }
    function submitRating(rate) {
        var recipeID = getUrlVars()["RecipeId"];
        $.ajax({
            type: "POST",
            url: "PIMServices.asmx/Rating",
            data: "{'objectTypeID':'1','objectID':'" + parseInt(recipeID, 10) + "','rating':'" + parseInt(rate, 10) + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
            },
            error: function (msg) { alert(msg.d); }
        });
    }

    function getUrlVars() {
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for (var i = 0; i < hashes.length; i++) {
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
        }
        return vars;
    }
    </script>
    <asp:HiddenField id="ratingStar" runat="server"/>
</asp:Content>

